<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body*{
            margin: 0;
            padding: 0;
        }

        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }

        .product-container{
            width: 1230px;
            height: 625px;
            /* border: 1px solid red; */
            background-color: #d3d3d3;
            margin: 10px auto;
        }

        .product-item{
            width: 234px;
            height: 300px;
            float: left;
            background-color: white;
            margin: 6px;
        }

        .advertise-picture {
            height: 613px;
        }

        .min{
            height: 143px;
            position: relative;
        }

        .product-info{
            width: 100%;
            height: 100%;
            text-align: center;
            position: relative;;
        }

        .product-info image{
            width: 159px;
            height: 159px;
            margin: 5px auto;
        }

        .product-info > span{
            display: block;
            margin: 7px;
        }

        .product-info .name{
            font-size: 16px;
            font-weight: bold;
        }

        .product-info .tag{
            font-size: 14px;
            color: #b0b0b0;
        }

        .product-info .price{
            position: absolute;
            font-size: 14px;
            color: #FFA500;
            bottom: 20px;
            text-align: center;
            width: 100%;
        }

        .product-info .price span{
            padding-left: 10px;
            font-size: 14px;
            color: #999999;
            text-decoration: line-through;
        }

        .product-mini{
            width: 100%;
            height: 100%;
            position: relative;
        }

        .product-mini img{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .product-mini span{
            width: 115px;
            display: block;
            padding-left: 20px;
            padding-top: 20px;
        }

        .product-mini .mini-price{
            color: #FFA500;
        }

        .show-more{
            width: 100%;
            height: 100%;
        }

        .show-more::after{
            content: '>';
            position: absolute;
            font-size: 40px;
            text-align: center;        
            width: 50px;
            height: 50px;
            line-height: 50px;
            border-radius: 50%;
            border: 3px solid #FFA500;
            color: #FFA500;
            right: 30px;
            top: 50%;
            transform: translateY(-55%);
        }

        .show-more span{
            width: 115px;
            display: block;
            padding-left: 20px;
            padding-top: 25px;
        }

        .show-more .more-title{
            font-size: 20px;
        }
        .show-more .more-type{
            color: #999999;
        }
    </style>
</head>
<body>
    <div class="product-container">
        <div class="product-item advertise-picture clearfix">
            <img src="/src/img/mall/mi00.png"/>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/mi01.png"/>
                <span class="name">Xiaomi 开放式耳机 Pro</span>
                <span class="tag">人体工学设计，三点支撑，贴合不压耳</span>
                <div class="price">
                    1099元起 <span>2099元起</span>
                </div>
            </div>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/mi02.png"/>
                <span class="name">Xiaomi Buds 5 Pro</span>
                <span class="tag">小米首发双功放三单元</span>
                <div class="price">
                    1199元起 <span>1299元起</span>
                </div>
            </div>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/mi03.png"/>
                <span class="name">REDMI Buds 6 Pro</span>
                <span class="tag">小米首发圈瓷同轴三单元 | 55dB深度降噪 | 无级动态降噪技术</span>
                <div class="price">
                    369元起 <span>399元起</span>
                </div>
            </div>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/图层 5.png"/>
                <span class="name">Redmi Buds 6 青春版</span>
                <span class="tag">42dB深度主动降噪 | 双麦AI通话抗风噪 | 12.4mm超大镀钛动圈</span>
                <div class="price">
                    139元起
                </div>
            </div>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/图层 6.png"/>
                <span class="name">Redmi Buds 6</span>
                <span class="tag">旗舰双单元架构 | 49dB深度降噪 | 42h超长续航</span>
                <div class="price">
                    189元起 <span>199元起</span>
                </div>
            </div>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/图层 7.png"/>
                <span class="name">REDMI Buds 6 Pro</span>
                <span class="tag">小米首发圈瓷同轴三单元 | 55dB深度降噪 | 无级动态降噪技术</span>
                <div class="price">
                    1099元起 <span>2099元起</span>
                </div>
            </div>
        </div>

        <div class="product-item clearfix">
            <div class="product-info">
                <img src="/src/img/mall/图层 8.png"/>
                <span class="name">Redmi Buds 6S</span>
                <span class="tag">半入耳主动降噪 | 33小时超长续航</span>
                <div class="price">
                    179元起 <span>299元起</span>
                </div>
            </div>
        </div>

        <div class="product-item min clearfix">
            <div class="product-mini">
                <span class="mini-name">Redmi Buds 3 <br>青春版</span>
                <span class="mini-price">999元</span>
                <img src="/src//img//mall/mi08.png">
            </div>
        </div>

        <div class="product-item min clearfix">
            <div class="show-more">
                <span class="more-title">浏览更多</span>
                <span class="more-type">热门</span>
            </div>
        </div>
    </div>
</body>
</html>